<template>
  <div class="userinfo">
    <el-row type="flex" justify="end" style="margin: 15px 0">
      <el-col :xs="12" :sm="14" class="hidden-md-and-up">
        <el-cascader
            v-model="Cascader_v"
            :options="options"
            placeholder="排序方法"
            style="margin-right: 10px;float: right"
            @change="handleChange"></el-cascader>
      </el-col>
      <el-col :md="14" class="hidden-sm-and-down">
        <el-button type="primary" @click="numSort" style="margin-right: 10px;float: right">按租赁订单排序</el-button>
        <el-button type="primary" @click="timeSort" style="margin-right: 10px;float: right">按登入时间排序</el-button>
        <el-button type="primary" @click="huifuSort" style="float: right">恢复默认排序</el-button>
      </el-col>
      <el-col :xs="12" :sm="10" :md="10" :lg="6">
        <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            clearable
            v-model="search">
          <el-button slot="append" icon="el-icon-search" @click="searchGo"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <van-popup v-model="show" closeable  round  class="col-xs-10 col-sm-6 col-md-5" >
      <van-field/>
      <van-cell-group>
        <van-field label="用户ID" :value="dangeUserInfo.id" readonly @click="copy(dangeUserInfo.id)" />
        <van-field label="用户名" :value="dangeUserInfo.name" readonly @click="copy(dangeUserInfo.name)"/>
        <van-field label="昵称" :value="dangeUserInfo.name2" readonly @click="copy(dangeUserInfo.name2)"/>
<!--        <van-field label="登录时间" :value="dangeUserInfo.drsj" readonly />-->
<!--        <van-field label="登录IP" :value="dangeUserInfo.drip" readonly />-->
<!--        <van-field label="注册时间" :value="dangeUserInfo.zcsj" readonly />-->
        <van-field label="余额" :value="dangeUserInfo.yue" readonly @click="copy(dangeUserInfo.yue)"/>
        <van-field label="注册IP" :value="dangeUserInfo.zcip" readonly @click="copy(dangeUserInfo.zcip)"/>
        <van-field label="联系方式" :value="dangeUserInfo.lxfs  || '暂未绑定'" readonly @click="copy(dangeUserInfo.lxfs)"/>
        <van-field label="微信绑定" :value="dangeUserInfo.openid  || '暂未绑定'" readonly @click="copy(dangeUserInfo.openid)"/>
        <van-field label="邮箱地址" :value="dangeUserInfo.email || '暂未绑定'" readonly @click="copy(dangeUserInfo.email)"/>
<!--        <van-field label="订单数量" :value="dangeUserInfo.count" readonly />-->
        <van-field label="权限" :value="dangeUserInfo.qx" readonly @click="copy(dangeUserInfo.qx)"/>
      </van-cell-group>
      <div class="text-center">
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_log(dangeUserInfo)">查看登录日志</van-button>
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_bill(dangeUserInfo)">查看余额记录</van-button>
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_perception(dangeUserInfo.id)">审查文章</van-button>
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_edit(dangeUserInfo)">编辑用户</van-button>
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_balance(dangeUserInfo)">修改余额</van-button>
        <van-button type="info" style="margin:5px 5px 5px 0" @click="user_password(dangeUserInfo.id)">重置密码</van-button>
        <van-button type="danger" style="margin:5px 5px 5px 0" @click="user_del(dangeUserInfo.id)">删除用户</van-button>
      </div>
    </van-popup>
    <el-table
        fit
        :data="userAll.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        style="width: 100%"
        highlight-current-row>
      <el-table-column
          prop="name"
          label="用户名"
      >
      </el-table-column>
      <el-table-column
          prop="drsj"
          label="登录时间"
      >
      </el-table-column>
      <el-table-column
          prop="drip"
          label="登录IP">
      </el-table-column>
      <el-table-column
          prop="zcsj"
          label="注册时间">
      </el-table-column>
      <el-table-column
          prop="count"
          width="100px"
          label="订单数量">
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="60px"
      >
        <template slot-scope="scope">
          <van-button type="info" @click.prevent="longlongsee(scope.row)" size="mini">查看</van-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="hidden-sm-and-up"
        style="margin: 12px 0px;float: right"
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
        :total="userAll.length"
    >
    </el-pagination>
    <el-pagination
        class="hidden-xs-only"
        style="margin: 12px 0px;float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userAll.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import utils from "@/utils/time"
import qs from 'qs'
import {delUserInfo, getUserAll, getUserSingle, setUserResetPwd} from "../../utils/api";
export default {
  name: "UserInfo",
  data(){
    return {
      userAll:[],
      leaseCount:[],
      dangeUserInfo:[],
      show:false,
      tmpUserAll:[],
      search:'',
      Cascader_v:'',
      numsortFlag:true,
      timesortFlag:true,
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      options: [{
        value: 'mr',
        label: '默认排序',
      },{
        value: 'dlsj',
        label: '登录时间',
        children: [{
          value: 'jiangxu',
          label: '降序',
        },{
          value: 'shengxu',
          label: '升序',
        }],
      },{
        value: 'zlsl',
        label: '租赁数量',
        children: [{
          value: 'jiangxu',
          label: '降序',
        },{
          value: 'shengxu',
          label: '升序',
        }],
      }
      ],
      pasArr:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9']
    }
  },
  created() {
    let id = this.$route.query.id
    if(id){
      getUserSingle({id}).then(respose=>{
        this.userAll=respose?.body;
        this.userAll.map((item)=>{
          item.drsj=utils.timestampToTime(item.drsj,5)
          item.zcsj=utils.timestampToTime(item.zcsj,5)
        })
      }).catch(error=>{
        console.log(error);
      })
    }else{
      getUserAll().then(respose=>{
        this.userAll=respose?.body;
        this.userAll.map((item)=>{
          item.drsj=utils.timestampToTime(item.drsj,5)
          item.zcsj=utils.timestampToTime(item.zcsj,5)
        })
      }).catch(error=>{
        console.log(error);
      })
    }
  },
  methods:{
    longlongsee(v){
      this.show=true;
      this.dangeUserInfo=v;
    },
    user_edit(v){
      this.$router.push({name:"useredit",params:{valuse:v}})
    },
    user_password(id){
      let password = '';
      for(let i=0;i<8;i++){
        password+=this.pasArr[Math.floor(Math.random()*this.pasArr.length)];
      }
      setUserResetPwd(qs.stringify({id:id,password:password})).then(respose=>{
        if(respose.status===200){
          this.$dialog.alert({
            message: `重置成功！新密码为：${password}`,
          }).then(() => {
            // on close
          });
        }else{
          this.$dialog.alert({
            message: `重置失败！`,
          }).then(() => {
            // on close
          });
        }
      }).catch(error=>{
        console.log(error);
        this.$dialog.alert({
          message: `重置失败！`,
        }).then(() => {
          // on close
        });
      })
    },
    user_bill(v){
      this.$router.push({name:'userbill',query:{userid:v.id}})
    },
    user_balance(v){
      this.$router.push({path:'/user/userbalance',query:{user:v.name}})
    },
    user_perception(id){
      this.$router.push({path:'/perception',query:{userid:id}})
    },
    user_del(id){
      this.$dialog.confirm({
        message: '您确定要永久删除吗？',
      }).then(() => {
        this.$dialog.confirm({
          message: '您真的确认吗？',
        }).then(() => {
          delUserInfo(qs.stringify({id:id})).then(respose=>{
            if(respose.status===200){
              this.$toast.success("删除成功");
              this.userAll = this.userAll.filter(v=>{
                return v.id!==id;
              })
            }else{
              this.$toast.fail("删除失败");
            }
          }).catch(error=>{
            console.log(error);
            this.$toast.fail("删除失败");
          })
        }).catch(()=>{})
      }).catch(() => {})
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      // console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage); //点击第几页
    },
    user_log(v){
      this.$router.push({name:'log',query:{user:v.name}})
    },
    timeSort(){
      if(this.timesortFlag){
        this.userAll.sort((a,b)=>b.drsj>a.drsj?1:-1)
      }else {
        this.userAll.sort((a,b)=>b.drsj<a.drsj?1:-1)
      }
      this.timesortFlag=!this.timesortFlag;
    },
    numSort(){
      if(this.numsortFlag){
        this.userAll.sort((a,b)=>b.count-a.count)
      }else {
        this.userAll.sort((a,b)=>a.count-b.count)
      }
      this.numsortFlag=!this.numsortFlag;
    },
    huifuSort(){
      this.userAll.sort((a,b)=>a.id-b.id)
    },
    searchGo(){
      let searchArr = this.userAll.filter(v=>{
        return v?.name?.indexOf(this.search)!==-1 || v.id==this.search || v?.name2?.indexOf(this.search)!==-1
      })
      this.tmpUserAll=this.userAll;
      this.userAll=searchArr;
    },
    handleChange(value) {
      if(value[0]==="mr"){
        this.userAll.sort((a,b)=>a.id-b.id)
      }else if(value[0]==="dlsj"){
        if(value[1]==="jiangxu"){
          this.userAll.sort((a,b)=>b.drsj>a.drsj?1:-1)
        }else if(value[1]==="shengxu"){
          this.userAll.sort((a,b)=>b.drsj<a.drsj?1:-1)
        }
      }else if(value[0]==="zlsl"){
        if(value[1]==="jiangxu"){
          this.userAll.sort((a,b)=>b.count-a.count)
        }else if(value[1]==="shengxu"){
          this.userAll.sort((a,b)=>a.count-b.count)
        }
      }
    },
    copy(v){
      if(!v) return
      let copyInput = document.createElement('input');//创建input元素
      document.body.appendChild(copyInput);//向页面底部追加输入框
      copyInput.setAttribute('value', v);//添加属性，将url赋值给input元素的value属性
      copyInput.select();//选择input元素
      document.execCommand("Copy");//执行复制命令
      this.$toast.success("复制成功");
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove();//删除动态创建的节点
    }
  },
  watch:{
    search(){
      if(this.search==="" && this.tmpUserAll.length){
        this.userAll=this.tmpUserAll;
      }
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
